<style>
    .goods-info-panel {
        text-align: center;
    }

    .goods-info-panel ul {
        list-style: none;
        text-align: center;
    }

    .goods-info-panel ul li {
        display: inline;
        margin: 0 30px 0 0;
        padding: 0 30px 0 0;
        font-size: 42px;
        border-right:1px solid #e8e8e8;
    }
</style>
<div id="mainContent" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north'" style="overflow: hidden;height: 150px;">
        <div class="goods-info-panel">
            <ul>
                <li style="color: #2b9e0a !important;">
                    <div id="totalOrder" class="gauge"  data-value="600"></div>
                    <span>订单总量</span>
                </li>
                <li style="color: #85c5e5 !important;">
                    <div id="payOrder" class="gauge"  data-value="500"></div>
                    <span>已付款</span>
                </li>
                <li style="color: #d07210 !important;">
                    <div id="unPayOrder" class="gauge"  data-value="100"></div>
                    <span>未付款</span>
                </li>
            </ul>
        </div>
    </div>
    <div data-options="region:'center'">
        <table id="orderListDg" title="" class="easyui-datagrid"
               data-options="
                fit:true,
                lines: true,
                rownumbers: false,
                striped: true,
                animate:true,
                singleSelect : true,
                showFooter: true,
                pagination: true,
                idField: 'orderId',
                onLoadSuccess: loadSuccess
            " border="0">
            <thead data-options="frozen:true">
            <tr>
                <th data-options="field:'orderId'" width="18%">订单号</th>
                <th data-options="field:'goodsName'" width="18%">商品</th>
                <th data-options="field:'goodsPrice'" width="18%">价格</th>
                <th data-options="field:'companyName'" width="18%">公司</th>
                <th data-options="field:'userName'" width="18%">用户名</th>
                <th data-options="field:'createTime'" width="15%">下单时间</th>
                <th data-options="field:'dataStatus',formatter:formatterControl" width="18%">订单状态</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<script src="/static/vendor/easyui/plugin/justgage-1.2.2/raphael-2.1.4.min.js"></script>
<script src="/static/vendor/easyui/plugin/justgage-1.2.2/justgage.js"></script>
<script>

    var dflt = {
        min: 0,
        max: 600,
        donut: true,
        gaugeWidthScale: 0.6,
        counter: true,
        hideInnerShadow: true
    }

    $(function(){

        var total = new JustGage({
            id: 'totalOrder',
            defaults: dflt
        });

        var payOrder = new JustGage({
            id: 'payOrder',
            defaults: dflt
        });

        var unPayOrder = new JustGage({
            id: 'unPayOrder',
            defaults: dflt
        });

    });


    function formatterControl(val,row) {
        return val;
    }
    
    function loadSuccess(data) {

        var dc = $('#mainContent').find('.editBtn, .delBtn');
        if (dc.length < 1) {
            return;
        }

        $(dc).each(function(r, d){
            var index = Math.floor(r/2);
            var cls = $(this).attr('class');
            var company = data.rows[index];

            if (cls == 'editBtn') {
                $(this).linkbutton({
                    plain: true,
                    iconCls: 'icon-edit',
                    onClick: function () {
                        editCompany(company);
                    }
                });
            } else {
                $(this).linkbutton({
                    plain: true,
                    iconCls: 'icon-remove',
                    onClick: function () {
                        removeCompany(company);
                    }
                });
            }
        });
    }
</script>